<template>
  <div class="tools-page">
    <div class="page-wrapper">
      <!-- 顶部导航栏 -->
      <nav class="top-nav">
        <div class="nav-content">
          <ul class="nav-list">
            <li v-for="(item, index) in navItems" :key="index" class="nav-item">
              <a 
                @click.prevent="navigateTo(item.href)" 
                :href="item.href" 
                :class="{ 'active': $route.path === item.href }"
                class="nav-link"
              >
                {{ item.text }}
              </a>
            </li>
          </ul>
        </div>
      </nav>
      
      <div class="container">
        <!-- 侧边栏目录 -->
        <aside class="sidebar">
          <div class="sidebar-header">
            <h2>目录</h2>
          </div>
          <div class="sidebar-content">
            <nav>
              <div v-for="(category, categoryIndex) in categories" :key="categoryIndex" class="category-section">
                <h3 class="category-title">{{ category.name }}</h3>
                <ul>
                  <li v-for="(toolName, index) in category.tools" :key="index">
                    <a 
                      :href="'#' + getSectionIdByTitle(toolName)" 
                      @click="scrollToSection(getSectionIdByTitle(toolName))"
                      :class="{ 'active': activeSection === getSectionIndexByTitle(toolName) }"
                    >
                      {{ toolName }}
                    </a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="content">
          <h1>!注意,该页面所有数据均为模拟数据，请勿当真!</h1>
          <section v-for="(section, index) in sections" :key="index" :id="'section' + (index + 1)">
            <h2>{{ section.title }}</h2>
            <p class="section-content" v-html="section.content"></p>
            <ul v-if="section.list && section.list.length > 0">
              <li v-for="(item, i) in section.list" :key="i">{{ item }}</li>
            </ul>
            <!-- 添加代码块组件 -->
            <code-block-component>
              <template #component>
                <component :is="getComponentForSection(section.title)"></component>
              </template>
              <template #sourceCode>
                <pre class="source-pre">{{ getSourceCodeForSection(section.title) }}</pre>
              </template>
            </code-block-component>
          </section>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import CodeBlockComponent from '@/components/CodeBlockComponent.vue';
import mobileTable from '@/toolsComponents/mobileTable.vue';
import filterTable from '@/toolsComponents/filterTable.vue';
import pagination from '@/toolsComponents/pagination.vue';
import operationTable from '@/toolsComponents/operationTable.vue';
import { toolsData } from '@/utils/toolsData.js';
import modalTable from '@/toolsComponents/modalTable.vue';
import virtualScroll from '@/toolsComponents/virtualScroll.vue';
import mapModule from '@/toolsComponents/mapModule.vue';
import timeline from '@/toolsComponents/timeline.vue';

export default {
  name: 'ToolsPage',
  components: {
    CodeBlockComponent,
    mobileTable,
    filterTable,
    pagination,
    operationTable,
    modalTable,
    virtualScroll,
    mapModule,
    timeline
  },
  data() {
    return {
      navItems: [
        {
          href: "/",
          text: "主页",
        },
        {
          href: "/game",
          text: "游戏",
        },
        {
          href: "/tools",
          text: "工具",
        },
        {
          href: "https://sheleftwithregrets.github.io/blog.github.io/",
          text: "博客",
        }
      ],
      categories: toolsData.categories,
      sections: toolsData.sections,
      activeSection: null
    };
  },
  methods: {
    handleScroll() {
      const content = this.$el.querySelector('.content');
      const sections = this.$el.querySelectorAll('.content section');
      const scrollTop = content.scrollTop;
      const contentHeight = content.clientHeight;
      
      let activeIndex = this.activeSection; 
      let minDistance = Infinity;

      for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        const sectionBottom = sectionTop + sectionHeight;
        
        const isPartiallyVisible = 
          (sectionTop <= scrollTop + contentHeight && sectionBottom >= scrollTop);

        const isFullyVisible = 
          (sectionTop >= scrollTop && sectionBottom <= scrollTop + contentHeight);

        if (isFullyVisible) {
          activeIndex = i;
          minDistance = Math.abs(scrollTop - sectionTop); 
        } else if (isPartiallyVisible) {
          const distanceToTop = Math.abs(scrollTop - sectionTop);
          
          if (distanceToTop < minDistance) {
            minDistance = distanceToTop;
            activeIndex = i;
          }
        }
      }
      
      if (this.activeSection !== activeIndex) {
        this.activeSection = activeIndex;
      }
    },
    
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ 
          behavior: 'smooth', 
          block: 'start' 
        });
        
        const index = parseInt(sectionId.replace('section', '')) - 1;
        this.activeSection = index;
        
        setTimeout(() => {
          this.handleScroll();
        }, 100);
      }
    },
    navigateTo(href) {
      if (href.startsWith('/')) {
        this.$router.push(href);
      } else {
        window.location.href = href;
      }
    },
    getComponentForSection(title) {
      return toolsData.componentMap[title];
    },
    
    getSourceCodeForSection(title) {
      return toolsData.sourceCodeMap[title];
    },
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },
    getSectionIdByTitle(title) {
      const index = this.sections.findIndex(section => section.title === title);
      return index !== -1 ? 'section' + (index + 1) : '';
    },
    getSectionIndexByTitle(title) {
      return this.sections.findIndex(section => section.title === title);
    }
  },
  mounted() {
    this.$nextTick(() => {
      const content = this.$el.querySelector('.content');
      if (content) {
        this.debouncedHandleScroll = this.debounce(this.handleScroll, 100);
        content.addEventListener('scroll', this.debouncedHandleScroll);
        this.handleScroll();
      }
    });
  },
  beforeDestroy() {
    const content = this.$el.querySelector('.content');
    if (content && this.debouncedHandleScroll) {
      content.removeEventListener('scroll', this.debouncedHandleScroll);
    }
  }
}
</script>

<style scoped>
.tools-page {
  min-height: 100vh;
}

.category-title {
  color: #409eff;
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0 8px 0;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.category-section:first-child .category-title {
  margin-top: 0;
}

.sidebar-content nav a {
  display: block;
  padding: 8px 12px 8px 20px;
  color: #ccc;
  text-decoration: none;
  border-radius: 4px;
  margin: 2px 0;
  transition: all 0.3s ease;
}

.sidebar-content nav a:hover {
  background-color: #3a3a3a;
  color: #fff;
}

.sidebar-content nav a.active {
  background-color: #409eff;
  color: white;
}

.tools-page {
  background: linear-gradient(135deg, #1e1e1e 0%, #121212 100%);
  padding: 0 20px;
  font-family: 'Arial', sans-serif;
}

.page-wrapper {
  max-width: 1200px;
  height: 100vh;
  margin: 0 auto;
  background: #2c2c2c;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏样式 */
.top-nav {
  background: #1a1a1a;
  border-radius: 10px 10px 0 0;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-list {
  position: relative;
  margin: 0;
  list-style-type: none;
  display: inline-flex;
  width: auto;
  justify-content: flex-end;
  padding: 0;
}

.nav-item {
  z-index: 2;
  position: relative;
  display: inline-block;
  transition: all 0.2s;
  width: auto;
  height: 100%;
}

.nav-link {
  color: #ffffff;
  transition: all 0.2s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  background: transparent;
}

.nav-link:hover {
  color: #3498db;
  background: transparent;
}

.nav-link.active {
  color: #3498db;
  background: transparent;
}

/* 主容器样式 */
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  flex: 0 0 250px;
  background: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  padding: 0;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  position: sticky;
  top: 0;
  background: #333333;
  padding: 20px 20px 10px 20px;
  z-index: 10;
  border-bottom: 1px solid #444;
}

.sidebar-header h2 {
  color: #ffffff;
  padding-bottom: 10px;
  margin: 0;
}

/* 侧边栏滚动条样式 */
.sidebar-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 10px 20px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

.sidebar-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin: 15px 0;
}



/* 主内容区域样式 */
.content {
  flex: 1;
  background: #333333;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  padding: 20px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.section-content{
  font-size: 14px;
  padding: 10px;
}

.content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.content section {
  margin-bottom: 30px;
}

/* 代码块组件样式 */
.content section code-block-component {
  margin-top: 20px;
  display: block;
}

/* 源代码pre标签样式 */
.source-pre {
  margin: 0;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #e0e0e0;
  background-color: #1e1e1e;
  padding: 15px;
  border-radius: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.content h1,
.content h2 {
  color: #3498db;
  border-bottom: 2px solid #444444;
  padding-bottom: 10px;
}

.content p {
  color: #e0e0e0;
  line-height: 1.6;
}

.content ul {
  color: #e0e0e0;
  padding-left: 20px;
}

.content ul li {
  margin: 10px 0;
}
</style>